<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化应用构建</title>
    <script src="../../utils/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <!-- 创建一个todo-item组件实例（组件模板） -->
            <todo-item></todo-item>
        </ol>
    </div>
    <!-- 升级 -->
    <div id="app-2">
        <ol>
            <!-- 使用自定义属性，并将自定义属性todo绑定到实例data中的item(其中item来自于groceryList) -->
            <todo-item2
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id"
            ></todo-item2>
        </ol>
    </div>
    <script>
        // 组件：拥有预定义选项的Vue实例
        // 注册组件：定义名为todo-item的新组件
        Vue.component("todo-item", {
            template: "<li>这是一个代办项</li>"
        });
        var app = new Vue({
            el: "#app",
        })
        // 注册组件
        Vue.component("todo-item2", {
            // props代表了类似自定义组件的属性（属性即像title，href等这种）
            props: ["todo"],
            template: "<li>{{ todo.text }}</li>"
        });
        var app2 = new Vue({
            el: "#app-2",
            data: {
                groceryList: [
                    {id: 0, text: "蔬菜"},
                    {id: 1, text: "水果"},
                    {id: 2, text: "其他食物"}
                ]
            }
        })
    </script>
</body>
</html>